<template>
	<view>
		<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
			<view class="wrapper" v-for="(item,index) in rebatelist" :key="index" @click="rebateClick(item.rebate_id)">
				<view class="main">
					<view class="left" style="font-weight: 550;">
						订单号 : {{item.trade_no}}
					</view>
					<view class="right" :style="'color: '+staColor(item.status).color +';'">
						{{staColor(item.status).text}}
					</view>
				</view>
				<view class="column">
					提现金额 : {{item.rebate_money}}
				</view>
				<view class="column">
					提现时间 : {{item.create_time}}
				</view>
			</view>
			
	<!-- 		<u-card  v-for="(item,index) in rebatelist" :key="index" @click="rebateClick(item.rebate_id)">
				<view slot="body" class="u-flex u-flex-col">
					<view  class="u-flex u-row-between" style="width: 100%;">
						<view>订单号:165468469434</view>
						<view>下单人:张三</view>
					</view>
					<view  class="u-flex u-row-between u-m-t-40"  style="width: 100%;">
						<view>订单名称:XXXXXX</view>
						<view>数量:15</view>
					</view>
				</view>
				<view slot="foot" class="u-flex u-row-between" style="width: 100%;">
					<view>订单金额:￥175</view>
					<view>佣金:￥10</view>
				</view>
				
			</u-card>
			 -->
			
			
			<u-loadmore :status="status" v-if="!rebatelist" bg-color="#f3f4f6" />
		</scroll-view>
		<u-toast ref="uToast" />
		<view class="empty">
			<u-empty text="暂无订单" mode="list" :show="rebatelist"></u-empty>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				rebatelist: [],
				page: 1,
				status: "loadmore",
				'limit': 10,
				total_page: 1,
			};
		},
		onLoad() {

		},
		onShow() {
			this.rebatelist = []
			this.getrebateList()
		},
		methods: {
			// 下拉菜单
			staColor(col) {
				switch (col) {
					case -1:
						return {
							text: '已作废',
								color: '#81ecec'
						};
					case 0:
						return {
							text: '待审核',
								color: '#fdcb6e'
						};
					case 1:
						return {
							text: '发放中',
								color: '#18B566'
						};
					case 2:
						return {
							text: '提现成功',
								color: '#ff7675'
						};
					case 3:
						return {
							text: '过期待领取',
								color: '#74b9ff'
						};
					default:
						break;
				}
			},
			rebateClick(e) {
				this.$u.route({
					url: 'pages/user/return_datails?id=' + e,
				})
			},
			getrebateList(e) {
				let that = this
				let postData = {
					"page": this.page,
					"limit": 20,
					"status": 1
				};
				that.$u.post('/api/rebate/list', postData).then(res => {
					console.log(res, "接口")
					that.total_page = res.total_page
					let len = res.list.length
					for (let i = 0; i < len; i++) {
						that.rebatelist.push(res.list[i])
					}
					if (res.total_page > 1) {
						that.status = 'loadmore';
					} else {
						that.status = 'nomore';
					}
				});
			},
		},
		// 返现详情
		onReachBottom() {
			let that = this;
			that.status = 'loading';
			that.page++;
			if (that.page > that.total_page) {
				that.status = 'nomore';
			} else {
				that.status = 'loading';
				that.getrebateList();
			}
		},
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		width: 100%;
		border-bottom: 1rpx solid #ececec;
		background-color: #FFFFFF;
		padding: 20rpx;

		.main {
			display: flex;
			justify-content: space-between;
			padding-bottom: 10rpx;
		}
		.column {
			padding: 5rpx 0rpx;
			color: #9e9e9e;
		}
	}

	.form-input {
		padding: 50rpx;
	}
	.empty {
		display: flex;
		justify-content: center;
		width: 100%;
		left: 0;
		bottom: 0;
		right: 0;
		position: fixed;
		top: 0;
	}
</style>
